<!--
 * @Author: your name
 * @Date: 2020-11-25 17:06:45
 * @LastEditTime: 2020-11-26 14:25:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \FenXiaoShangChengAdmind:\工作资料\project_wjh\KunLunAdmin\web\KunLunAdmin\src\components\LcM\echarts\time_select\index.vue
-->
<template>
  <div class="time-select-wrap">
    <div class="label"
      v-if="isShowMainLabel == true && isShowMainLabel != 'false'"
    >日期选择</div>
    <!-- <search-date
      lableName="日期"
      :tThis="this"
      labelWidth="80px;"
      dateWidth="150px;"
      @dateChange="handleDateChange"
    /> -->
    <div class="time-item">
      <search-date-single
        lableName="日期"
        :tThis="this"
        labelWidth="80px;"
        dateWidth="150px;"
        @dateChange="handleDateChange"
        :type="dateSelectType"
        :curSelectDate="curSelectDate"
        :curSelectSeason="curSelectSeason"
      />
    </div>
    <div class="time-item">
      <div class="time-select-board" @click.stop="handleTimeBoardSelect">
        <div class="board-item" :class="{'active': (boardIndex == 0)}" data-tag="day">日</div>
        <div class="board-item" :class="{'active': (boardIndex == 1)}" data-tag="week">周</div>
        <div class="board-item" :class="{'active': (boardIndex == 2)}" data-tag="month">月</div>
        <div class="board-item" :class="{'active': (boardIndex == 3)}" data-tag="season">季</div>
        <div class="board-item" :class="{'active': (boardIndex == 4)}" data-tag="year">年</div>
      </div>
    </div>
  </div>
</template>

<script>
import search_date_single from "@/components/LcM/search_con/search_date_single";

export default {
  components: {
    "search-date-single": search_date_single,
  },
  props: {
    labelName: {
      type: [String],
      default: "日期选择"
    },
    isShowMainLabel: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      boardIndex: 0, //当前选中
      dateSelectType: "date", //日期的类型
      curSelectDate: "", //当前时间变量，
      curSelectSeason: "", //当前季度变量
    };
  },
  methods: {
    /* 选择 */
    handleTimeBoardSelect (e) {
      const tar = e.srcElement;
      const tag = tar.dataset.tag;
      if (tag == 'day') {
        this.dateSelectType = 'date';
        this.boardIndex = 0;
      } else if (tag == 'week') {
        this.dateSelectType = 'week';
        this.boardIndex = 1;
      } else if (tag == 'month') {
        this.dateSelectType = 'month';
        this.boardIndex = 2;
      } else if (tag == 'season') {
        this.dateSelectType = 'season';
        this.boardIndex = 3;
      } else if (tag == 'year') {
        this.dateSelectType = 'year';
        this.boardIndex = 4;
      } 
      this.curSelectDate = "2";
      this.curSelectSeason = "1";
      this.curSelectDate = "";
      this.curSelectSeason = "";
    },
    /* 日期选择 */
    handleDateChange(opt) {
      var selectDate = opt.selectDate;
      this.curSelectDate = selectDate;
      // this.dateChooseArr, this.startDate, this.endDate
    },
  },
};
</script>

<style lang="scss" scoped>
.time-select-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
  .time-item {
    padding-left: 10px;
  }
}

.time-select-board {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-radius: 4px;
  .board-item {
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-right: 1px solid #ddd;
    cursor: pointer;

    &.active {
    background-color: #41B977;
  }
  }
  .board-item:nth-last-child(1) {
    border-right-width: 0;
  }
  
}

.time-select-wrap {
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>